<include file="__PUBLIC__/_header"/>
<body>
<div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try{
            ace.settings.check('navbar' , 'fixed')
        }catch(e){

        }
    </script>
    <include file="__PUBLIC__/_header_title"/><!-- /.container -->
</div>
<div class="main-container" id="main-container">
<script type="text/javascript">
    try{
        ace.settings.check('main-container' , 'fixed')
    }catch(e){

    }
</script>

<div class="main-container-inner">
<a class="menu-toggler" id="menu-toggler" href="#">
    <span class="menu-text"></span>
</a>

<div class="sidebar" id="sidebar">
    <script type="text/javascript">
        try{
            ace.settings.check('sidebar' , 'fixed')}catch(e){

        }
    </script>

    <include file="__PUBLIC__/_nav"/>
    <!-- /.nav-list -->

    <div class="sidebar-collapse" id="sidebar-collapse">
        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
    </div>

    <script type="text/javascript">
        try{
            ace.settings.check('sidebar' , 'collapsed')
        }catch(e){

        }
    </script>
</div><div class="main-content">
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try{
            ace.settings.check('breadcrumbs' , 'fixed')
        }catch(e){

        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="{:Controller::_createUrl('index/index')}">首页</a>
        </li>

        <li class="active"> 商品中心 </li>
        <li class="active"> 我的商品 </li>
    </ul><!-- .breadcrumb -->
</div>

<div class="page-content">
<div class="row">
<div class="page-header">
    <h1>
        商品中心
        <small>
            <i class="icon-double-angle-right"></i>
            全部商品
        </small>
    </h1>
</div><!-- /.page-header -->
<div class="col-xs-12">
    <div class="tabbable">
        <ul class="nav nav-tabs padding-18 tab-size-bigger" id="myTab">
            <li class="active">
                <a data-toggle="tab" href="#faq-tab-1">
                    <i class="green icon-bell-alt bigger-110"></i>
                    全部商品
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#faq-tab-2">
                    <i class="red icon-dashboard bigger-110"></i>
                    在售商品
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#faq-tab-3">
                    <i class="blue icon-download-alt bigger-110"></i>
                    待售商品
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#faq-tab-4">
                    <i class="blue icon-rocket bigger-110"></i>
                    热销商品
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#faq-tab-5">
                    <i class="blue icon-info bigger-110"></i>
                    促销商品
                </a>
            </li>
            <li>
                <a data-toggle="tab" href="#faq-tab-6">
                    <i class="blue icon-refresh bigger-110"></i>
                    最近更新
                </a>
            </li>
        </ul>

        <div class="tab-content no-border padding-24">
            <div id="faq-tab-1" class="tab-pane fade in active">
                <div id="faq-list-1" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <table class="table table-striped table-bordered table-hover" id="grid-table"></table>
                        <div id="grid-pager"></div>
                    </div>
                </div>
            </div>
            <!--已上架商品-->
            <div id="faq-tab-2" class="tab-pane fade">
                <div id="faq-list-2" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="is_saleing" id="vo">
                                    <tr>
                                        <td>{$vo.m_id}</td>
                                        <td>{$vo.m_name}</td>
                                        <td>{$vo.m_price}</td>
                                        <td>
                                            <a href="#">
                                                <if condition="$vo['state'] == 1">
                                                    下架
                                                    <else />
                                                    上架
                                                </if>
                                            </a>
                                        </td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                    </div>
                </div>
            </div>
            <!--待上架-->
            <div id="faq-tab-3" class="tab-pane fade">
                <div id="faq-list-3" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <volist name="wait_saleing" id="vo">
                                        <tr>
                                            <td>{$vo.m_id}</td>
                                            <td>{$vo.m_name}</td>
                                            <td>{$vo.m_price}</td>
                                            <td>
                                                <a href="#">
                                                    <if condition="$vo['state'] == 1">
                                                        下架
                                                        <else />
                                                        上架
                                                    </if>
                                                </a>
                                            </td>
                                        </tr>
                                    </volist>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                    </div>
                </div>
            </div>
            <!--热销商品-->
            <div id="faq-tab-4" class="tab-pane fade">
                <div id="faq-list-4" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="sample-table-3" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>销量</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="hot_saleing" id="vo">
                                    <tr>
                                        <td>{$vo.m_id}</td>
                                        <td>{$vo.m_name}</td>
                                        <td>{$vo.m_price}</td>
                                        <td>{$vo.total}</td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                            <i class="icon-share-alt blue bigger-110"> <a href="#" onclick="alert('正在完善中...');return false;"  target="_blank">查看更多记录</a> </i>
                        </div><!-- /.table-responsive -->
                    </div>
                </div>
            </div>
            <!--促销商品-->
            <div id="faq-tab-5" class="tab-pane fade">
                <div id="faq-list-5" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="sample-table-4" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>更新时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="preferential_saleing" id="vo">
                                    <tr>
                                        <td>{$vo.m_id}</td>
                                        <td>{$vo.m_name}</td>
                                        <td>{$vo.m_price}</td>
                                        <td>{$vo.update_time}</td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                            <i class="icon-share-alt blue bigger-110"> <a href="#" onclick="alert('正在完善中...');return false;"  target="_blank">查看更多记录</a> </i>
                        </div><!-- /.table-responsive -->
                    </div>
                </div>
            </div>
            <!--最近更新-->
            <div id="faq-tab-6" class="tab-pane fade">
                <div id="faq-list-6" class="panel-group accordion-style1 accordion-style2">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table id="sample-table-6" class="table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>价格</th>
                                    <th>更新时间</th>
                                    <th>操作者</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="recent_udpate" id="vo">
                                    <tr>
                                        <td>{$vo.m_id}</td>
                                        <td>{$vo.m_name}</td>
                                        <td>{$vo.m_price}</td>
                                        <td>{$vo.update_time}</td>
                                        <td>{$vo.user_id}</td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                            <i class="icon-share-alt blue bigger-110"> <a href="#" onclick="alert('正在完善中...');return false;"  target="_blank">查看更多记录</a> </i>
                        </div><!-- /.table-responsive -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="dialog-confirm" class="hide">
        <div class="alert alert-info bigger-110">
            您好，请选择配置项
        </div>

        <div class="space-6"></div>

        <p class="bigger-110 bolder center grey">
            <i class="icon-hand-right blue bigger-120"></i>
            单击列表中某一项选中
        </p>
    </div><!-- #dialog-confirm -->

    <div id="dialog-confirm-delete-info" class="hide">
        <div class="alert alert-info bigger-110">
            您好，商品删除操作请求已经成功发送
        </div>

        <div class="space-6"></div>

        <p class="bigger-110 bolder center grey">
            <i class="icon-hand-right blue bigger-120"></i>
            请耐心等待管理员审批
        </p>
    </div><!-- #dialog-confirm -->

    <script type="text/javascript">
        var $path_base = "/";//this will be used in gritter alerts containing images
    </script>

</div><!-- PAGE CONTENT ENDS -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
</a>
<script type="text/javascript">
jQuery(function($) {

    $.widget("ui.dialog", $.extend({

    }, $.ui.dialog.prototype, {
        _title: function(title) {
            var $title = this.options.title || '&nbsp;'
            if( ("title_html" in this.options) && this.options.title_html == true )
                title.html($title);
            else title.text($title);
        }
    }));

    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";
    jQuery(grid_selector).closest("#grid-pager").css({ 'overflow-x' : 'scroll' });
    jQuery(grid_selector).jqGrid({
        direction: "ltl",
        url:"?m=findPersonalDataNotInFlow",
        datatype: "json",
        height: 250,
        width:window.screen.availWidth-20,
        autowidth: false,
        jsonReader:{id:"m_id"},
        colNames:[  '编号', '序号','商品名称', '商品价格', '规格','详情','', ''],
        colModel:[
            {name:'m_id',index:'m_id',fixed:false, editable:false, sortable:true, searchoptions:{sopt:['cn']}},
            {name:'order_id',index:'order_id',fixed:false, editable:true, sortable:true, searchoptions:{sopt:['cn']}},
            {name:'m_name',index:'m_name',fixed:false, editable:true, sortable:true, searchoptions:{sopt:['cn']}},
            {name:'m_price',index:'m_price',editable: true, sortable:true, searchoptions:{sopt:['cn']}},
            {name:'m_spec',index:'m_spec',fixed:false, editable: false, sortable:false, search:false},
            {name:'op',index:'op', fixed:false, sortable:false,editable: false, search: false},
            {name:'update',index:'update', fixed:false, sortable:false, resize:false, search: false},
            {name:'myac',index:'m_id', fixed:false, sortable:false, resize:false, search: false,
                formatter:'actions',
                formatoptions:{
                    keys:true,
                    delOptions:{
                        recreateForm: true,
                        beforeShowForm:beforeDeleteCallback,
                        url:"<?php echo Controller::_createUrl('merchandise/delete');?>",
                        afterSubmit: function (response, postdata) {
                            eval("var data = " + response.responseText);
                            if (data.result == "success") {
                                $( "#dialog-confirm-delete-info" ).removeClass('hide').dialog({
                                    resizable: false,
                                    modal: true,
                                    title: "<div class='widget-header'><h4 class='smaller'><i class=' icon-leaf blue'></i> 温馨提示 </h4></div>",
                                    title_html: true});
                            }else if(data.result == "nexists"){
                                bootbox.dialog({
                                    message: "<span class='btn-sm btn-danger'>该记录不存在！</span>"
                                });
                            } else {
                                bootbox.dialog({
                                    message: "<span class='btn-sm btn-danger'>非法操作！有疑问请联系管理员</span>"
                                });
                            }
                            return response.responseText;
                        }
                    },editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                }
            }
        ],

        viewrecords : true,
        rowNum:20,
        rowList:[10,20,30],
        pager : pager_selector,
        altRows: true,
        //toppager: true,

        multiselect: false,
        //multikey: "ctrlKey",
        multiboxonly: false,

        loadComplete : function() {
            var table = this;
            setTimeout(function(){
                styleCheckbox(table);
                updateActionIcons(table);
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        editurl: "{:Controller::_createUrl('merchandise/updateAttr')}",//nothing is saved
        autowidth: true,
        height:660
    });



    //navButtons
    jQuery(grid_selector).jqGrid('navGrid',pager_selector,
            { 	//navbar options
                edit: false,
                editicon : 'icon-pencil blue',
                add: false,
                addicon : 'icon-plus-sign purple',
                del: false,
                delicon : 'icon-trash red',
                search: true,
                searchicon : 'icon-search orange',
                refresh: true,
                refreshicon : 'icon-refresh green',
                view: false,
                viewicon : 'icon-zoom-in grey'
            },
            {

            },
            {

            },
            {

            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function(e){
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function(){
                    style_search_filters($(this));
                }
                ,
                multipleSearch: false
                /**
                 multipleGroup:true,
                 showQuery: true
                 */
            },
            {

            }
    )

    jQuery(grid_selector).jqGrid('navGrid',pager_selector,{

    })
            .jqGrid('navGrid',pager_selector,{}).jqGrid('navButtonAdd',"#grid-pager",
            {
                caption:"",
                buttonicon:"icon-plus-sign purple",
                onClickButton: function(){
                    window.location.href="{:Controller::_createUrl('merchandise/add')}";
                },
                position:"first"
            }
    );

    function style_edit_form(form) {
        //enable datepicker on "sdate" field and switches for "stock" field
        form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
                .end().find('input[name=stock]')
                .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

        //update buttons classes
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
        buttons.eq(1).prepend('<i class="icon-remove"></i>')

        buttons = form.next().find('.navButton a');
        buttons.find('.ui-icon').remove();
        buttons.eq(0).append('<i class="icon-chevron-left"></i>');
        buttons.eq(1).append('<i class="icon-chevron-right"></i>');
    }


    function style_delete_form(form) {
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
        buttons.eq(1).prepend('<i class="icon-remove"></i>')
    }

    function style_search_filters(form) {
        form.find('.delete-rule').val('X');
        form.find('.add-rule').addClass('btn btn-xs btn-primary');
        form.find('.add-group').addClass('btn btn-xs btn-success');
        form.find('.delete-group').addClass('btn btn-xs btn-danger');
    }
    function style_search_form(form) {
        var dialog = form.closest('.ui-jqdialog');
        var buttons = dialog.find('.EditTable')
        buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
        buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
        buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
    }

    function beforeDeleteCallback(e) {
        var form = $(e[0]);
        if(form.data('styled')) return false;
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_delete_form(form);
        form.data('styled', true);
    }

    function beforeEditCallback(e) {
        var form = $(e[0]);
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_edit_form(form);
    }



    //it causes some flicker when reloading or navigating grid
    //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
    //or go back to default browser checkbox styles for the grid
    function styleCheckbox(table) {
        /**
         $(table).find('input:checkbox').addClass('ace')
         .wrap('<label />')
         .after('<span class="lbl align-top" />')


         $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
         .find('input.cbox[type=checkbox]').addClass('ace')
         .wrap('<label />').after('<span class="lbl align-top" />');
         */
    }


    //unlike navButtons icons, action icons in rows seem to be hard-coded
    //you can change them like this in here if you want
    function updateActionIcons(table) {
        var replacement =
        {
            'ui-icon-pencil' : 'icon-edit blue',
            'ui-icon-trash' : 'icon-trash red',
            'ui-icon-disk' : 'icon-ok green',
            'ui-icon-cancel' : 'icon-remove red'
        };
        $(table).find('.ui-pg-div span.ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
        })
    }

    //replace icons with FontAwesome icons like above
    function updatePagerIcons(table) {
        var replacement =
        {
            'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
            'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
            'ui-icon-seek-next' : 'icon-angle-right bigger-140',
            'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
        })
    }
    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container:'body'});
        $(table).find('.ui-pg-div').tooltip({container:'body'});
    }
});
</script>
</body>
</html>
